<template>
	<view class="ident-body">
		<u-popup v-model="show" mode="center" width="350rpx" height="350rpx" border-radius="14" :closeable="true"
			:mask-close-able="false">
			<view class="ident">
				<view class="ident-text">图片正在处理中...</view>
				<view class="ident-loading">
					<u-loading mode="circle" size="40"></u-loading>
				</view>
			</view>

		</u-popup>
		<view class="ident-delicacy">请上传美食图片</view>
		<view class="ident-delicacy2">进行智能识别搜索</view>
		<view class="ident-button">
			<view class="ident-button-icon" @click="recognition()">
				<view>
					<view class="icon">
						<u-icon name="plus" color="#606266" size="80"></u-icon>
					</view>

					<view class="text">
						点击上传图片
					</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 统一路径
				urlHeat3: "", //https://fine-food.xiamu.icu
				// urlHeat3: "http://127.0.0.1:8080",
				keyword: '糖',
				tempFilePaths: '',
				show: false,

			}
		},
		onLoad() {
			// this.recognition()
			const { hostname } = this.$store.state.moduleCommon;
			this.urlHeat3 = hostname;
		},
		methods: {
			recognition() {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //album 从相册选图，camera 使用相机
					success: (res) => {
						console.log(res.tempFilePaths[0]); //拍照图片的路径
						this.show = true
						uni.uploadFile({
							url: `${this.urlHeat3}/api/Distinguish/file`,
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (res) => {
								console.log('上传文件...')
								this.keyword = JSON.parse(res.data).data;
								this.goSearch();
							}
						});
					}
				});

			},
			goSearch() {
				uni.navigateTo({
					url: `/pages/search/search?keyword=${this.keyword}`,
					success: (res) => {
						console.log(res);
						this.show = false
					},
					fail: (err) => {
						console.log(err);
					},
				});
			}


		}
	}
</script>

<style lang="scss">
	.ident-body {}
.ident-delicacy{
	margin-top: 350rpx;
	height: 50rpx;
	display: flex;
	align-items: center; // 纵轴对齐方式，默认是纵轴 子元素垂直居中
	justify-content: center; //纵轴对齐方式，默认是纵轴
	font-size: 40rpx;
}
.ident-delicacy2{
	height: 50rpx;
	display: flex;
	align-items: center; // 纵轴对齐方式，默认是纵轴 子元素垂直居中
	justify-content: center; //纵轴对齐方式，默认是纵轴
	font-size: 40rpx;
}
	.ident-button {
		margin-top: 100rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;

		.ident-button-icon {
			width: 300rpx;
			height: 300rpx;
			margin-left: 190rpx;
			background-color: #F4F5F6;
			display: flex;
			align-items: center; // 纵轴对齐方式，默认是纵轴 子元素垂直居中
			justify-content: center; //纵轴对齐方式，默认是纵轴

			.icon {
				// margin: auto;
				display: flex;
				align-items: center; // 纵轴对齐方式，默认是纵轴 子元素垂直居中
				justify-content: center; //纵轴对齐方式
			}

			.text {
				font-size: 40rpx;

			}

		}
	}

	.ident {
		width: 350rpx;
		height: 350rpx;

		display: flex;
		align-items: center; // 纵轴对齐方式，默认是纵轴 子元素垂直居中
		justify-content: center;

		.ident-text {

			display: flex;
			align-items: center; // 纵轴对齐方式，默认是纵轴 子元素垂直居中
			justify-content: center
		}

		.ident-loading {

			display: flex;
			align-items: center; // 纵轴对齐方式，默认是纵轴 子元素垂直居中
			justify-content: center
		}

	}
</style>
